<template>
  <div>
    <!-- 头部--导航栏 -->
    <div class="head clearfix">
      <div class="header-nav">
        <!-- header部分 -->
        <div class="zhengti-nav">
          <!-- 头部左侧图片  logo和搜索栏 左侧logo和搜索总共占据50% -->
          <div class="nav-lef">
            <!-- 左侧logo width=12%-->
            <div class="shouye-img">
              <div class="shoueye-logo-img">
                <img src="./image/logo.png" alt />
              </div>
            </div>
            <!-- 左侧的搜索 width=88%-->
            <div class="nav-left-sum">
              <div>
                <input
                  type="text"
                  name="keyword"
                  id="keyword"
                  @click="getWidth"
                  placeholder="搜“洛杉矶”试试看"
                />
                <div id="info">
                  <div class="info-explor">
                    <div class="search-hide-title">搜索爱彼迎</div>
                    <div class="search-hide-list">
                      <span>全部</span>
                      <span>房源</span>
                      <span>体验</span>
                      <span>多天探索体验</span>
                      <span>餐馆</span>
                    </div>
                  </div>
                </div>
                <!-- </transition> -->
              </div>
            </div>
          </div>
          <!-- 头部右侧---导航栏的地方 -->
          <div class="header-menu nav-typeface nav-rig">
            <div class="clearfix">
              <router-link to="/register" class="header-menu-cart" id="nav-item">注册</router-link>
            </div>
            <div class="clearfix">
              <router-link to="/login" class="header-menu-cart" id="nav-item">登录</router-link>
            </div>
            <div class="clearfix">
              <router-link to="/help" class="header-menu-cart" id="nav-item">帮助</router-link>
            </div>
            <div class="clearfix">
              <router-link to="/store" class="header-menu-cart" id="nav-item">故事</router-link>
            </div>
            <div class="clearfix">
              <router-link to="/lease" class="header-menu-cart" id="nav-item">出租房源</router-link>
            </div>
            <!-- 手机端 -->
            <div class="clearfix">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link header-menu-cart shoujiduan" id="nav-item">手机端</span>
                <el-dropdown-menu slot="dropdown" class="shoujiduan-drop">
                  <el-dropdown-item class="sjd-drop-item">
                    <img src="./image/erweima.png" alt />
                    <div>下载手机客户端</div>
                    <div>支持Android</div>
                  </el-dropdown-item>
                  <el-dropdown-item class="sjd-drop-item">
                    <img src="./image/gongzhonghao.png" alt />
                    <div>关注微信服务号</div>
                    <div>id：AirbnbOfficial</div>
                  </el-dropdown-item>
                  <el-dropdown-item class="sjd-drop-item">
                    <img src="./image/xiaochengxu.jpg" alt />
                    <div>扫一扫，打开爱彼迎微信小程序</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <!-- 人民币 -->
            <div class="clearfix">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link header-menu-cart" id="nav-item">人民币 - ￥</span>
                <el-dropdown-menu slot="dropdown" class="rmb-drop">
                  <el-dropdown-item class="rmb-drop-item">常用货币</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item active-rmb">
                    人民币 - ￥
                    <i class="el-icon-check duigou"></i>
                  </el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">美元 - $</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">日元 - ¥</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">港币 - $</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">新台币 - $</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">欧元 - €</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">英镑 - £</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">澳大利亚元 - $</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">阿联酋迪拉姆 - ﺩ.ﺇ</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">波兰兹罗提 - zł</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">巴西雷亚尔 - R$</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">丹麦克朗 - kr</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">韩元 - ₩</el-dropdown-item>
                  <el-dropdown-item class="rmb-drop-item">其他货币</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <!-- 首页 -->
            <div class="clearfix">
              <router-link to="/shouye" class="header-menu-cart shouyeactive" id="nav-item">首页</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>





<style scoped>
/* 清除浮动样式 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/* 网站的头部---导航栏 */
.head {
  width: 100%;
  height: 80px;
  position: absolute; /*直接使用绝对定位的原因是要让导航栏浮在banner上面 */
  /* background: rgba(0, 0, 0, 0); */
}
.header-nav {
  width: 100%;
  height: 80px;
  position: relative;
  z-index: 10; /*让导航栏在banner上面*/
}
.zhengti-nav {
  height: 80px;
}
/* 导航栏的左边部分 */
.nav-lef {
  width: 50%;
  height: 80px;
  display: inline-block;
}
/* 导航栏左侧的图片 */
.shouye-img {
  display: inline-block; /*让图片和搜索在一条线上，转化成为行内块元素*/
  width: 10%;
  height: 80px;
  vertical-align: top; /*为了让图片不往下沉*/
}
.shouye-img img {
  width: 34px;
  height: 34px;
  margin: 23px;
}
/* 导航栏左侧的搜索部分 */
.nav-left-sum {
  width: 89%;
  height: 50px;
  padding: 15px 0px;
  display: inline-block;
}
#keyword {
  padding: 0px 0px 0px 20px;
  font-weight: bolder;
  font-size: 18px;
  width: 458px;
  height: 46px;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  /* position: fixed; */
}
#info {
  width: 458px;
  /* height: 200px; */
  padding: 8px 0px;
  margin: 0px 0px 16px 0px;
  border-radius: 4px;
  /* border: 1px solid red; */
  background-color: #fff;
  visibility: hidden;
  /* position: fixed; */
}
.search-hide-title {
  margin: 16px 32px;
  font-size: 12px;
  font-family: "微软雅黑";
}
.search-hide-list {
  margin: 16px 32px;
}
.search-hide-list span {
  display: inline-block;
  height: 43px;
  padding: 12px 16px;
  border: 1px solid #000;
  font-weight: 600;
  margin: 0px 8px 8px 0px;
}

/* 导航栏的右边部分----nav部分 */
.nav-rig {
  width: 48%;
  height: 80px;
  margin: 0;
  display: inline-block;
  margin-right: 2%;
}
.nav-rig div {
  float: right;
  height: 80px;
  line-height: 60px;
}
#nav-item {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  float: right;
  vertical-align: middle;
  padding: 10px;
}
#nav-item:hover {
  text-decoration: none;
  border-bottom: 2px solid #fff;
}
/* 手机端下拉菜单的每一个图片 */
.shoujiduan {
  position: relative;
}
.sjd-drop-item {
  width: 171px;
  height: 177px;
  display: inline-block;
  margin: 0px 16px;
}
.sjd-drop-item div {
  font-family: Circular, PingFang-SC, "Hiragino Sans GB", 微软雅黑,
    "Microsoft YaHei", "Heiti SC";
  font-size: 14px;
  font-weight: 800;
  line-height: 1.28571em;
  color: rgb(72, 72, 72);
}
.sjd-drop-item:hover {
  background: none;
  color: rgb(72, 72, 72);
}
.sjd-drop-item img {
  width: 160px;
  height: 160px;
}
.shoujiduan-drop {
  /* 点击手机端的下拉菜单 */
  width: 644px;
  height: 227px;
  border: 1px solid rgb(235, 235, 235);
  overflow: auto;
  margin: 0px;
}
/* 人民币系列 */
/* 默认钱币显示的颜色 */
.active-rmb {
  color: rgb(0, 132, 138);
}
.rmb-drop {
  width: 328px;
  height: 400px;
  border: 1px solid #ebebeb;
  overflow: auto;
  margin: 0px;
}
.duigou {
  margin-left: 150px;
}
.rmb-drop-item {
  width: 279px;
  height: 50px;
  padding: 0 16px;
  margin: 0 auto;
}
.rmb-drop-item:hover {
  border-bottom: 1px solid rgb(118, 118, 118);
  background: none;
  color: #737478;
}
/* 
.xian {
  width: 100%;
  height: 1px;
  background: #ebebeb;
} */
/* .shouyeactive {
  border-bottom: 2px solid rgb(0, 132, 137);
  color: rgb(0, 132, 137);
} */
/* .footer ul {
  background: #f2f2f2;
  position: relative;
  display: inline;
} */
</style>



<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    // 让搜索框变长以及过渡效果
    getWidth() {
      var newWidth = document.getElementById("keyword");
      newWidth.style.width = "600px";
      newWidth.style.transition = "all 1s ease";
      var newShow = document.getElementById("info");
      newShow.style.width = "600px";
      // newShow.style.height = "200px";
      newShow.style.visibility = "visible";
      newShow.style.transition = "all 1s ease";
    }
  },
  computed: {
    cartList() {
      return this.$store.state.cartList;
    }
  }
};
</script>